import React from "react";
import {Form, Input, Space, Button, Select} from "antd";
import TheUpload from "@/components/TheUpload";
import { apiServiceShowLabelEdit, apiServiceShowLabelAdd } from '@/request/services'
import _ from 'lodash'

class Editor extends React.Component {
  state = {
    type: '',
    editorValue: {},
    fileList: [],
    loading: false
  };
  componentDidMount() {
    this.setState({
      type: this.props.type
    })
    if (this.props.editorValue && this.props.type === 'editor') {
      let fileList = [
        {
          uid: this.props.editorValue.serviceShowLabelImage,
          name: "image",
          url: this.props.editorValue.serviceShowLabelImage,
        },
      ]
      this.setState({
        editorValue: this.props.editorValue,
        fileList
      }, () => {
        this.formRef.setFieldsValue({
          serviceShowLabelName: this.props.editorValue.serviceShowLabelName,
          serviceShowLabelImage: this.props.editorValue.serviceShowLabelImage,
          businessCategory: this.props.editorValue.businessCategory,
        })
      })
    }
  }
  getFileResult = (value) => {
    if (value.length && value[0] && value[0].response) {
      this.formRef.setFieldsValue({ serviceShowLabelImage: value[0].response.data });
    } else {
      this.formRef.setFieldsValue({ serviceShowLabelImage: '' });
    }
  };
  onFinish = async (value) => {
    this.setState({
      loading: true
    })
    if (this.state.type === 'editor') {
      let res = await apiServiceShowLabelEdit({ ...value, serviceShowLabelId: this.state.editorValue.serviceShowLabelId })
      if (res.code === 0) {
        this.setState({
          loading: false
        })
        this.props.handleCancel()
        React.$message({
          type: 'info',
          content: '修改成功'
        })
        this.props.reload()
      }
    }
    if (this.state.type === 'add') {
      let res = await apiServiceShowLabelAdd({ ...value })
      if (res.code === 0) {
        this.setState({
          loading: false
        })
        this.props.handleCancel()
        React.$message({
          type: 'info',
          content: '新增成功'
        })
        this.props.reload()
      }
    }
  }
  render() {
    const { fileList, type, loading } = this.state
    let layout = {
      labelCol: {
        span: 6,
      },
      wrapperCol: {
        span: 16,
      },
    };
    return (
      <div>
        <Form {...layout} ref={ref => this.formRef = ref} onFinish={this.onFinish}>

          {/*<Form.Item label={'门店类型'} rules={[{ required: true }]} name="businessCategory">*/}
          {/*  <Select*/}
          {/*      placeholder="请选择门店类型"*/}
          {/*      allowClear*/}
          {/*  >*/}
          {/*    <Select.Option value={"0"}>宠物门店</Select.Option>*/}
          {/*    <Select.Option value={"1"}>宠物酒店</Select.Option>*/}
          {/*    <Select.Option value={"2"}>宠物医院</Select.Option>*/}
          {/*  </Select>*/}
          {/*</Form.Item>*/}
          <Form.Item label={'名称'} rules={[{ required: true }]} name="serviceShowLabelName">
            <Input placeholder="请输入服务标签名称" />
          </Form.Item>
          {
            type === 'editor' && <Form.Item label={'图片'} rules={[{ required: true }]} name="serviceShowLabelImage">
              <TheUpload
                fileList={fileList}
                maxSize={10}
                getFileResult={this.getFileResult}
                len={1}
              />
            </Form.Item>
          }
          {
            type === 'add' && <Form.Item label={'图片'} rules={[{ required: true }]} name="serviceShowLabelImage">
              <TheUpload
                maxSize={10}
                getFileResult={this.getFileResult}
                len={1}
              />
            </Form.Item>
          }
          <Form.Item>
            <div style={{ display: "flex", justifyContent: "flex-end" }}>
              <Space>
                <Button onClick={this.props.handleCancel}>取消</Button>
                <Button loading={loading} type="primary" htmlType="submit">保存</Button>
              </Space>
            </div>
          </Form.Item>
        </Form>
      </div>
    );
  }
}

export default Editor;
